import React from 'react';
import {connect} from 'dva';
import PoetryItem from "../components/poetry/PoetryItem";
import TextInfo from "../components/poetry/TextInfo";
import SearchBar from "../components/search/SearchBar";
import getThemeColor from "../utils/themeutil";
import {Link} from 'dva/router';
import FloatBtn from "../components/pic/FloatBtn";
import FaHome from 'react-icons/lib/fa/home';
import FaRight from 'react-icons/lib/fa/caret-down';

function SearchPage({dispatch, search}) {

  function searchPoetry(payload) {
    dispatch({
      type: 'search/queryPoetry',
      payload: payload
    });
  }

  function searchNext() {
    dispatch({
      type: 'search/queryPoetry',
      payload: {
        content: searchContent,
        id: lastId,
      }
    })
  }


  function getPoetryItem(app, ct) {
    return (<PoetryItem
      from={'search'}
      title={app.title}
      content={app.content}
      author={app.author}
      pic={app.pic}
      poetryId={app.id}
      dynasty={app.dynasty}
      key={'index_list_' + ct}
    />);
  }

  const {poetryList, containNext, lastId, searchContent} = search;

  let count = 0;

  console.log("the poetryList: ", poetryList);
  return (
    <div>
      <TextInfo toTop={true} info={'中华诗选'} sub={'搜一搜，查询更多诗词'} styles={{
        fontSize: '1.4em',
      }}/>


      {/*检索组件*/}
      <SearchBar search={searchPoetry} searchContent={searchContent}/>


      {
        poetryList && poetryList.length > 0?
        poetryList.map(a => getPoetryItem(a, ++count))
          :
          searchContent && <TextInfo sub={'~~悲拉个催，没搜索到 “' + searchContent + '” 相关的诗词，换个词再试一试吧'}
                    subStyles={{
                      textAlign: 'center',
                    }}/>
      }

      <TextInfo sub={'古诗选 | Zweb+ © 2017~2018 | YiHui'}
                styles={
                  {
                    display: 'absolute',
                    bottom: '1em',
                  }
                }
                subStyles={{
                  textAlign: 'center',
                }}/>

      <Link to={'/'}>
        <FloatBtn
          defaultClick={true}
          children={<FaHome/>}
          btnStyle={{
            position: 'fixed',
            bottom: '1em',
            left: '1em',
            backgroundColor: getThemeColor(),
            fontSize: '.9em',
            padding: '.1em .1em .1em .2em',
          }}/>
      </Link>

      {containNext &&
      <FloatBtn
        clickFunc={searchNext}
        children={<FaRight/>}
        btnStyle={{
          position: 'fixed',
          bottom: '1em',
          left: '6em',
          backgroundColor: getThemeColor(),
          fontSize: '.9em',
          padding: '.1em .1em .1em .2em',
        }}/>}

    </div>
  );
}

SearchPage.propTypes = {};

function mapStateToProps({search}) {
  return {search};
}

export default connect(mapStateToProps)(SearchPage);
